<template>
  <div :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons')
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    goodTypeState: {
      type: Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      chart: null,
      series:[
        {
          type: 'bar',
          // itemStyle: {
          //   color:function(params){
          //     var colorList  = ['#6698FF','#1F45FC','#82CAFF','#43BFC7','#C36241']
          //     return colorList[params.dataIndex];
          //   },
          // },
          label: {
            show: true,
            position: 'inside',
            fontSize: 14,
            color:'#fff',
          },
          barWidth: '50%',
          data: [],
          animationDuration
        }
      ],
      xAxis:[
        {
        type: 'category',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color:'red'
          }
        },
        data: [],
        boundaryGap: [0, 0.01],
        axisLine:{
          lineStyle:{
            color:'#B6B6B4'
          }
        },
        axisTick: {
          alignWithLabel: true
        }}
      ]
    }
  },
  mounted() {
    this.getData()
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getData(){
      if (this.goodTypeState && this.goodTypeState.length){
        this.series[0].data = this.goodTypeState.map(val=>val.goodsTotalCount)
        this.xAxis[0].data = this.goodTypeState.map(item => item.goodsType)
      }
    },
    // selectClick(str,status){
    //   this.xAxis[0].data = ['电气类', '机械类','气动类']
    //   this.series[0].data = [98, 342, 267]
    //   switch (str) {
    //     case '电气类':
    //       if (status){
    //         this.xAxis[0].data = ['机械类','气动类']
    //         this.series[0].data = this.series[0].data.splice(1,2)
    //       }
    //       break;
    //     case '机械类':
    //       if (status){
    //         this.xAxis[0].data = ['电气类','气动类']
    //         this.series[0].data = this.series[0].data.splice(1,2)
    //       }
    //       break;
    //     case '气动类':
    //       if (status){
    //         this.xAxis[0].data = ['电气类', '机械类']
    //         this.series[0].data = this.series[0].data.splice(0,2)
    //       }
    //       break;
    //   }
    //   this.chart.setOption({
    //     series:this.series,
    //     xAxis:this.xAxis
    //   })
    // },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}',
          textStyle:{
            color:'#fff'
          }
        },
        // legend: {
        //   show:false,
        //   data: ['电气类', '机械类','气动类']
        // },
        grid: {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:this.xAxis,
        yAxis:[
          {
            type: 'value',
            axisLine:{
              show: false,
              lineStyle:{
                color:'#B6B6B4',
                type:'dashed'
              }
            },
            splitLine: { show: false },
            axisTick: {
              show:false,
              alignWithLabel: true
            },
            axisLabel: {
              formatter: '{value}'
            },
          }
        ],
        series:this.series
      })
    }
  }
}
</script>
